<template>
	<view class="page">
		<view class="pageBg">
			<image src="https://bjsx.gzwhir.com/admin-api/infra/file/18/get/page-bg1.jpg" mode="aspectFill"></image>
		</view>
		<view class="flex0">
			<u-navbar :fixed='false' leftIconColor="#fff" bgColor="transparent" @leftClick="navBack" title="危机评估结果">
				<view slot="center" class="navTitle" style="color: #fff;">
					危机评估结果
				</view>
			</u-navbar>
		</view>
		<view class="flex1">
			<scroll-view scroll-y="true" class="scrollView pt30">
				<view class="pd30">
					<view class="wbox" v-if="info">
						<view class="map" :class="info.score?'':'nomap'">
							<view class="cvscontainer" v-if="info.score">
								<view class="cvs">
									
									<view class="line2 line">
										<view class="dot1"></view>
										<view class="dot2"></view>
										<view class="i1">
											<view class="cr" :style="'transform:rotate('+(-(136-136*info.score/info.referenceScore))+'deg)'"></view>
										</view>
									</view>
								</view>
							</view>
							<view class="hd">
								<view class="score">
									<text class="num">{{info.score}}</text><text>分</text>
								</view>
								<view class="name">
									评估得分
								</view>
								<view class="p" v-html="info.content"></view>
								<view class="tag" :style="'color:'+stageOption(info.stage).color+';background:'+stageOption(info.stage).bgColor">
									{{stageOption(info.stage).label}}
								</view>
							</view>
						</view>
						<view class="btns">
							<view class="btn" @tap="checkResult">
								确认评估结果
							</view>
							<view class="btn gray" @tap="goUpdate">
								返回更改评估内容
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		onShow: function() {
			var pages = getCurrentPages();
			var page = pages[pages.length - 1];
			if(page.options['id']){
				this.$data.itemid = page.options['id'];
			}
		},
		data() {
			return {
				itemid:'101',
				info: {}
			}
		},
		methods: {
			checkResult(){//确认评估结果
				var that=this;
				//确认后跳转详情
				uni.redirectTo({
					url:'/subpage/teacher/warningList/detail?id='+that.itemid
				})
			},
			goUpdate(){//返回表单页，edit=true通知表单页获取初始值
				var that=this;
				uni.redirectTo({
					url:'/subpage/teacher/warningList/form?edit=true&id='+that.itemid
				})
			},
			getInfo() {
				var that = this;
				if(that.itemid){
					var res = {
						id:101,
						score: 10,
						referenceScore:20,
						stage:0,
						content:'固定文案说明固定文案说明固定'
					};
					that.info = res;
				}
			}
		},
		watch:{
			itemid:function(){
				this.getInfo();
			}
		},
		mounted() {
			this.getInfo();
		}
	}
</script>

<style lang="scss" scoped>
	.wbox{
		padding: 40rpx;
		margin-bottom: 20rpx;
		background: #fff;
		border-radius: 30rpx;
		&:last-child{
			margin-bottom: 0;
		}
		.btns{
			margin-top: 80rpx;
			margin-bottom: 20rpx;
			.btn{
				text-align: center;
				font-size: 28rpx;
				color: #fff;
				background: #fe9c29;
				line-height: 90rpx;
				border-radius: 90rpx;
				margin-bottom: 30rpx;
				&:last-child{
					margin-bottom: 0;
				}
				&.gray{
					color: #4d5765;
					background: #e1ebf8;
				}
			}
		}
		.cvscontainer{
			padding-bottom: 50%;
			position: relative;
			overflow: hidden;
			pointer-events: none;
			.line{
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				overflow: hidden;
				&:after{
					content: "";
					display: block;
					width: 100%;
					padding-bottom: 100%;
				}
				.dot1{
					position: absolute;
					left: 30rpx;
					bottom: 50%;
					width: 10rpx;
					height: 10rpx;
					background: #fb9b36;
					border-radius: 50%;
					margin-bottom: 5rpx;
				}
				.dot2{
					position: absolute;
					right: 30rpx;
					bottom: 50%;
					width: 10rpx;
					height: 10rpx;
					background: #e1ebf8;
					border-radius: 50%;
					margin-bottom: 5rpx;
				}
				.i1{
					position: absolute;
					left: 0;
					top: 0;
					right: 0;
					bottom: calc(50% + 10rpx);
					overflow: hidden;
					.cr{
						position: absolute;
						left: 30rpx;
						top: 30rpx;
						right: 30rpx;
						transform: rotate(-136deg);
						&:after{
							content: "";
							position: absolute;
							left: 0;
							right: 0;
							top: 0;
							bottom: 0;
							border-left: 10rpx solid #fb9b36;
							border-top: 10rpx solid #fb9b36;
							border-right: 10rpx solid #e1ebf8;
							border-bottom: 10rpx solid #e1ebf8;
							border-radius: 50%;
							box-sizing: border-box;
						}
						&:before{
							content: "";
							display: block;
							padding-bottom: 100%;
						}
					}
					
				}
				&.line2{
					left: 20rpx;
					right: 20rpx;
					top: 20rpx;
					position: absolute;
					z-index: 5;
					.dot1{
						background: #679bd9;
					}
					.i1{
						.cr:after{
							border-left: 10rpx solid #679bd9;
							border-top: 10rpx solid #679bd9;
						}
					}
				}
			}
		}
		.map{
			position: relative;
			z-index: 5;
			padding-bottom: 50rpx;
			margin-bottom: 40rpx;
			&.nomap{
				padding-bottom: 0;
				.hd{
					position: static;
					left: 0;
					right: 0;
					.score,.tag{
						display: none;
					}
				}
			}
			.hd{
				position: absolute;
				left: 60rpx;
				right: 60rpx;
				bottom: 0;
				text-align: center;
				color: #4d5765;
				.score{
					font-size: 24rpx;
					
					line-height: 1;
					margin-bottom: 20rpx;
					.num{
						font-size: 64rpx;
					}
				}
				.name{
					font-size: 32rpx;
					font-weight: bold;
					margin-bottom: 10rpx;
				}
				.p{
					padding: 10rpx 20rpx 30rpx;
					font-size: 24rpx;
					color: #7e8998;
				}
				.tag{
					display: inline-block;
					line-height: 40rpx;
					font-size: 24rpx;
					color: #fe9c29;
					background: #ffebd4;
					border-radius: 4rpx;
					padding: 0 12rpx;
				}
			}
		}
	}
</style>